<!--
* description: 网点备件销售-销售价格配置
* author: hzm
* createdDate: 2021-1-27
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="dynamicApiConfigs"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-is-fix-choose="false"
      :dynamic-is-fix-index="false"
      :dynamic-is-show-more-btn="true"
      :dynamic-api-style="'restful'"
      :callback-obj="callbackObj"
    />
  </div>
</template>

<script>
import { formMixins } from '@/components/mixins/formMixins'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/paSparePartsManagement'

export default {
  name: 'SalesSheetMaking',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  data() {
    return {
      dynamicApiConfigs: orgApis.getMoreShopQuery,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'saleDlrTypeName',
              label: '销售网点类型',
              align: 'center'
            },
            {
              prop: 'customerTypeName',
              label: '客户性质',
              align: 'center'
            },
            {
              prop: 'limitName',
              label: '是否限制',
              align: 'center'
            },
            // {
            //   prop: 'priceTypeName',
            //   label: '价格类型1',
            //   align: 'center'
            // },
            {
              prop: 'floatUp',
              label: '浮动上限',
              align: 'center'
            },
            {
              prop: 'floatDown',
              label: '浮动下限',
              align: 'center'
            },
            {
              prop: 'remark',
              label: '备注',
              align: 'center'
            }
          ],
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 库存状态
            {
              compKey: 'compKey1',
              labelName: '销售网点类型：',
              codeField: 'saleDlrType',
              component: () => import('@/components/org/userSeleapiConfig'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '1', statusText: '直营店' },
                { statusId: '2', statusText: '授权店' }
              ],
              isRequire: true,
              type: 'inputText',
              isMust: true,
              span: 6
              // isRequire: true
            },
            // 车辆状态
            {
              compKey: 'compKey2',
              labelName: '客户性质：',
              codeField: 'customerType',
              isRequire: true,
              component: () => import('@/components/org/userSeleapiConfig'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '0', statusText: '一般客户' },
                { statusId: '1', statusText: '直营店' },
                { statusId: '2', statusText: '授权店' }
              ],
              type: 'inputText',
              isMust: true,
              span: 6
            },
            // 入库仓库
            {
              compKey: 'compKey3',
              labelName: '限制：',
              codeField: 'isLimit',
              isRequire: true,
              component: () => import('@/components/org/userSeleapiConfig'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '0', statusText: '否' },
                { statusId: '1', statusText: '是' }
              ],
              type: 'inputText',
              isMust: true,
              span: 6
            },
            // 审核状态
            // {
            //   compKey: 'compKey4',
            //   labelName: '价格类型：',
            //   codeField: 'priceType',
            //   isRequire: true,
            //   component: () => import('@/components/org/userSeleapiConfig'),
            //   oFields: 'statusId,statusText',
            //   options: [
            //     { statusId: '0', statusText: '订单价' },
            //     { statusId: '1', statusText: '建议零售价' },
            //   ],
            //   type: 'inputText',
            //   isMust: true,
            //   span: 6
            // },
            // {
            //   compKey: 'compKey5',
            //   labelName: '浮动比例：',
            //   codeField: 'floatDown,floatUp',
            //   isRequire: true,
            //   // validrule: {
            //   //   isInteger: true
            //   // },
            //   component: () => import('@/components/pa/rangeSelect'),
            //   // isInput: true,
            //   isMust: false,
            //   isMul: true,
            //   span: 8
            // },
            {
              compKey: 'compKey5',
              labelName: '浮动下限：',
              codeField: 'floatDown',
              isRequire: true,
              validrule: {
                // 保留一到两位小数
                isformat: /^([1-9]\d{0,10}|[1-9][0-9]{0,10}\.\d{1,2}|0\.\d{1,2}?|0)$/,
                resectMessage: {
                  isformat: '请输入正确的浮动比例!'
                }
              },
              component: () => import('@/components/org/commonInput'),
              isInput: true,
              isMust: true,
              isMul: false,
              span: 6
            },
            {
              compKey: 'compKey6',
              labelName: '浮动上限',
              codeField: 'floatUp',
              isRequire: true,
              validrule: {
                // 保留一到两位小数
                isformat: /^([1-9]\d{0,10}|[1-9][0-9]{0,10}\.\d{1,2}|0\.\d{1,2}?|0)$/,
                resectMessage: {
                  isformat: '请输入正确的浮动比例!'
                }
              },
              disabled: true,
              component: () => import('@/components/org/commonInput'),
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey7',
              labelName: '备注：',
              codeField: 'remark',
              isInput: true,
              component: () => import('@/components/org/commonInput'),
              isMust: true,
              span: 12
            }
          ],
      tableButtons: [
        {
          conmpKey: 'btenKey1',
          type: 'primary',
          size: 'small',
          text: '保存',
          name: '',
          // clickEvent: () => this.queryTable(1),
          clickEvent: () => this.save(),
          position: 'right'
        },
        {
          conmpKey: 'btenKey2',
          type: '',
          size: 'small',
          text: '重置',
          name: 'reset',
          clickEvent: () => this.reset(),
          position: 'right'
        }
      ],
      formField: this.$utils.getFormField(this, {
        saleDlrType: '',
        customerType: '',
        // 'floatDown,floatUp': [],
        isLimit: '',
        priceType: '',
        'floatDown,floatUp': '0,100',
        floatUp: '',
        floatDown: '',
        remark: ''
      }),
      callbackObj: {
        onRowDbClick: (row, column, event, rowIndex) => {
          this.formField.priceSetId = row.priceSetId
          this.formField.updateControlId = row.updateControlId
          for (const key in this.formField) {
            if (key !== 'floatDown,floatUp') {
              this.formField[key] = row[key]
            }
          }
        }
      }
    }
  },
  watch: {
    // // 浮动上线
    // 'formField.floatUp': {
    //   handler(val) {
    //     this.formField['floatDown,floatUp'] = this.formField.floatDown.toString() + ',' + this.formField.floatUp.toString()
    //   }
    // },
    // 'formField.floatDown': {
    //   handler(val) {
    //     this.formField['floatDown,floatUp'] = this.formField.floatDown.toString() + ',' + this.formField.floatUp.toString()
    //   }
    // }
    // 浮动上线
    'formField.floatUp': {
      handler(val) {
        if (Number(val) > 100) {
          this.formField['floatUp'] = ''
          return this.$message('不能大于100')
        }
        if (Number(val) < Number(this.formField['floatDown'])) {
          this.$nextTick(() => {
            this.formField['floatUp'] = ''
          })
          if (val) this.$message('请输入正确的浮动上限')
        }
      }
    },
    'formField.floatDown': {
      handler(val, oldval) {
        if (Number(val) > 100) {
          this.formField['floatDown'] = ''
          return this.$message('不能大于100')
        }
        this.tableComponents.find(comp => comp.codeField === 'floatUp').disabled = !val
        if (!val) {
          if (oldval) {
            this.formField['floatUp'] = ''
          }
        }
      }
    }
  },
  mounted() {
    // this.queryTable(1),
    // this.$refs.multipleTable.list = [
    //   {
    //     index: 1
    //   }
    // ]
  },
  methods: {
    save() {
      // if(Number(this.formField.floatUp) > Number(this.formField.floatDown)) {
      //   this.$message({
      //     message: '111',
      //     type: 'success',
      //     duration: 1000
      //   })
      // }
      this.$utils.validataMoth(this, 'validpage')
      if (!this.valid) return
      const that = this
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: orgApis.getMoreShopSave,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: this.formField
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.code === 1) {
          this.$message({
            message: '保存成功' /* 作废成功*/,
            type: 'success',
            duration: 1000
          })
          this.reset()
          this.queryTable(1)
        } else {
          // 保存失败
          this.$message({
            message: '保存失败:' + response.msg /* 保存失败*/,
            type: 'error',
            duration: 1000
          })
        }
        this.popupsVisible = false
      })
    }
  }
}
</script>

<style>
</style>
